import { forwardRef } from "react";
import { useResizeDetector } from "react-resize-detector";
import Overlay from "./overlay";
import type { ViewportProps } from "./types";

const Viewport = forwardRef<HTMLDivElement, ViewportProps>(
  ({ imageId, classes, onResize }: ViewportProps, fref) => {
    const { ref } = useResizeDetector<HTMLDivElement>({
      onResize,
    });

    return (
      <div ref={ref} className={classes + " relative"}>
        <div ref={fref} className="h-full"></div>
        <Overlay imageId={imageId} />
      </div>
    );
  }
);

export default Viewport;
